<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>长颈鹿web地图</title>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
      }
      body,
      button,
      input,
      select,
      textarea {
        font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
      }
      #container {
        min-width: 600px;
        min-height: 767px;
      }
    </style>
    <script
      charset="utf-8"
      src="./js/map.js"
    ></script>
    <script src="./js/jq.js"></script>
    <script>
      var init = function() {
        var url = document.URL,
            id;
        if(typeof(url)=='string' && url.indexOf('?id')!==-1){
           var i = url.indexOf('?id='),
           id = url.slice(i+4,url.length);
           console.log(id)
        }else{
            alert('参数有误');
            return
        }
        $.get("https://cjl.pptzb.com/api/PointRecord/detail", {
          id: id
        }).then(function(res) {
          if (!res.Adverts) {
              console.log(res.data.ErrorMessage);
              alert(res.data.ErrorMessage || "网络错误");
              return;
          }
          console.log(res)
          var Adverts = res.Adverts,
            dots = [];

          for (var i = 0; i < Adverts.length; i++) {
            var { Lat, Lng } = Adverts[i];
            dots.push([Lat, Lng]);
          }
          console.log(dots);
          var center = new qq.maps.LatLng(dots[0][0], dots[0][1]);
          var map = new qq.maps.Map(document.getElementById("container"), {
            center: center,
            zoom: 13
          });
          function latlngFun(dots) {
            if (dots.length == 0 || !dots) {
              alert("没有数组");
              reutrn;
            }
            var i = 0,
              arr = [],
              transient;
            while (i < dots.length) {
              transient = dots[i];
              arr.push(new qq.maps.LatLng(transient[0], transient[1]));
              i++;
            }
            return arr;
          }
          var latlng = latlngFun(dots);
          console.log(latlng);

          var anchor = new qq.maps.Point(6, 6),
            size = new qq.maps.Size(30, 30),
            origin = new qq.maps.Point(0, 0),
            icon = new qq.maps.MarkerImage(
              "./image/a1.png",
              size,
              origin,
              anchor
            );

          for (var i = 0; i < latlng.length; i++) {
            (function(n) {
              var marker = new qq.maps.Marker({
                icon: icon,
                map: map,
                position: latlng[n]
              });
              qq.maps.event.addListener(marker, "click", function(e) {
                console.log(e);
              });
            })(i);
          }
        });
      };
    </script>
  </head>
  <body onload="init()">
    <div id="container"></div>
    <p id="info" style="margin-top:10px;"></p>
  </body>
</html>
